<template>
  <section class="app-inner">
    <el-card class="header-card">
      <el-form :inline="true" :model="queryParams" size="small">
        <el-form-item label="巡更点编号">
          <el-input v-model="queryParams.spotCode" clearable placeholder="请输入巡更点编号" maxlength="32"></el-input>
        </el-form-item>
        <el-form-item label="巡更点名称">
          <el-input
            v-model="queryParams.spotName"
            clearable
            placeholder="请输入巡更点名称或编号"
            maxlength="32"
          ></el-input>
        </el-form-item>

        <el-form-item label="楼栋">
          <el-select v-model="queryParams.spotBuilding" clearable placeholder="请选择楼栋" @change="buildChange">
            <el-option v-for="item in buildList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="楼层">
          <el-select v-model="queryParams.spotFloor" clearable placeholder="请选择楼层">
            <el-option v-for="item in floorList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary" @click="createPosition">创建巡更点</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="table-card">
      <el-table border :data="tableData">
        <!-- <el-table-column type="selection" width="55"></el-table-column> -->
        <el-table-column prop="spotCode" label="巡更点编号" width="200"></el-table-column>
        <el-table-column prop="spotName" label="巡更点名称"></el-table-column>
        <el-table-column prop="isInitNfc" label="初始化" width="80">
          <template slot-scope="scope">
            {{ getLabel(scope.row.isInitNfc, 1) }}
          </template>
        </el-table-column>
        <el-table-column prop="spotBuildingName" label="楼栋"></el-table-column>
        <el-table-column prop="spotFloorName" label="楼层"></el-table-column>
        <el-table-column prop="spotRoomName" label="区域或房间">
          <template slot-scope="scope">
            {{ scope.row.spotRoomName || '--' }}
          </template>
        </el-table-column>
        <el-table-column label="点位坐标">
          <template slot-scope="scope">
            {{ `${scope.row.spotPositionX},${scope.row.spotPositionY}` }}
          </template>
        </el-table-column>
        <el-table-column prop="spotType" label="巡更点类型">
          <template slot-scope="scope">
            {{ getLabel(scope.row.spotType, 2) }}
          </template>
        </el-table-column>
        <el-table-column label="巡更点识别码">
          <template slot-scope="scope">
            <div v-if="scope.row.spotType === 1">{{ scope.row.nfcNo || '--' }}</div>
            <el-button v-else type="text" @click="downloadQrcode(scope.row)" size="small">导出</el-button>
          </template>
        </el-table-column>
        <el-table-column label="是否有效" width="100">
          <template slot-scope="scope">
            <el-switch
              :active-value="1"
              :inactive-value="0"
              v-model="scope.row.spotEnable"
              @change="changeStatus(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="110">
          <template slot-scope="scope">
            <el-button @click="editPosition(scope.row)" type="text" size="small">编辑</el-button>
            <el-button @click.native.prevent="delEvent(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        layout="total, prev, pager, next"
        @current-change="pageHandleChange"
        :current-page="currentPage"
        :total="totalPageNum"
      ></el-pagination>
    </el-card>

    <position-modal ref="positionModal" @ok="positionModalOk"></position-modal>
  </section>
</template>

<script>
import { getSpotList, deleteSpot, modifyValidStatus, downloadQrcode } from './js/patrol'
import PositionModal from './components/PositionModal'
import { isInitialize, spotTypeList } from './js/constants'
import { getListByTag } from './js/monitor'

export default {
  name: 'Position',
  components: { PositionModal },
  data () {
    return {
      pageSize: 10,
      currentPage: 1,
      totalPageNum: 0,
      tableData: [],
      queryParams: {},
      buildList: [], // 楼栋
      floorList: [] // 楼层
    }
  },
  mounted () {
    this.getListByTag(0, 1, 'buildList')
    this.getPositionList()
  },
  methods: {
    // 查询按钮
    onSubmit () {
      this.currentPage = 1
      this.getPositionList()
    },

    // 获取巡更点
    async getPositionList () {
      const params = {
        pageNum: this.currentPage,
        pageSize: this.pageSize
      }
      const {
        data: { list, total }
      } = await getSpotList(Object.assign({}, this.queryParams, params))
      this.tableData = list
      this.totalPageNum = total
    },

    // 创建巡更点
    createPosition () {
      this.$refs.positionModal.add()
    },

    // 是否有效
    async changeStatus (row) {
      // let params = this.$pick(row, 'spotCode')
      await modifyValidStatus(row.spotCode)
      this.getPositionList()
    },

    // 编辑
    editPosition (row) {
      this.$refs.positionModal.edit(row)
    },

    // 删除
    delEvent (row) {
      this.$confirm('此操作将删除该巡更点,并将删除所有关于该巡更点的巡查任务 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let params = {
          idList: [row.id]
        }
        const { code, msg } = await deleteSpot(params)
        if (code === 0) {
          this.$message.success('删除成功')
          if (this.tableData.length === 1 && this.currentPage > 1) {
            this.currentPage--
          }
          this.getPositionList()
        } else {
          this.$message.warning(msg)
        }
      })
    },

    // 导出二维码
    async downloadQrcode (row) {
      try {
        const params = {
          spotCode: row.spotCode,
          spotName: row.spotName
        }
        const { code } = await downloadQrcode(params)
        if (code === 0) {
          this.$message.success('导出成功!')
        }
      } catch (e) {
        this.$message.warning(e.msg)
      }
    },

    // 巡更点CU弹框回调
    positionModalOk () {
      this.getPositionList()
    },

    // 楼栋改变
    buildChange (val) {
      this.floorList = []
      this.$set(this.queryParams, 'spotFloor', undefined)
      if (val) {
        this.getListByTag(val, 2, 'floorList')
      }
    },

    // 获取楼层信息
    // parentId: 上级id, tag: 1:楼栋 2:楼层 3:楼层区域 4:房间, arr: 保存的数组
    async getListByTag (parentId, tag, arr) {
      const params = {
        parentId,
        tag,
        tenantNo: this.$ls.get('User-Info').tenantNo
      }
      const { data } = await getListByTag(params)
      if (tag === 3 || tag === 4) {
        this[arr] = [...this[arr], ...data]
      } else {
        this[arr] = data
      }
    },

    // 获取label
    getLabel (val, type) {
      // type: 1(是否初始化), 2(巡更点类型)
      if (type === 1) {
        return this.$base.constFormatter(isInitialize, val)
      }
      if (type === 2) {
        return this.$base.constFormatter(spotTypeList, val)
      }
    },

    // 分页
    pageHandleChange (page) {
      this.currentPage = page
      this.getPositionList()
    }
  }
}
</script>

<style lang="scss" scoped>
.app-inner {
  .header-card {
    margin-bottom: 10px;
  }
  .el-pagination {
    text-align: center;
    display: block;
    margin: 10px auto;
  }
}
</style>
